<template>
  <div class="main-content">
    <el-row class="source">
      <el-button type="success" @click="changeInfo">修改个人信息</el-button>
    </el-row>

    <div v-cloak>
      <div class="headImg">
        <!-- <img :src="headImg" /> -->
        <el-image
          style="width: 80px; height: 80px; border-radius: 50%"
          :src="headImg"
        ></el-image>
        <el-upload action="#" :show-file-list="false" :http-request="changeImg">
          <span class="changeImg">替换图片</span>
        </el-upload>
      </div>

      <el-form
        :model="form"
        :inline="true"
        label-position="top"
        label-width="135px"
        class="info"
      >
        <el-row v-if="session.account_type != 2">
          <el-col :span="12">
            <el-form-item label="账号" prop="usercode" class="infoItem">
              <el-input v-model="form.usercode" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email" class="infoItem">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="在职总部门" prop="department" class="infoItem">
              <el-input v-model="form.department"></el-input>
            </el-form-item>
            <el-form-item label="在职职位" prop="position" class="infoItem">
              <el-input v-model="form.position"></el-input>
            </el-form-item>
            <el-form-item v-if="session.role_id == 3 ||session.role_id == 6"
              label="归属业务经理"
              prop="manager_name"
              class="infoItem"
            >
                <el-select
            v-model="form.manager_name"
            placeholder="请选择业务经理"
            @change="changeManager"
            value-key="id"
          >
            <el-option
              v-for="item in manager"
              :key="item.id"
              :label="item.username"
              :value="item"
            >
            </el-option>
          </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="username" class="infoItem">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" class="infoItem">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item
              label="在职部门组织"
              prop="organization"
              class="infoItem"
            >
              <el-input v-model="form.organization"></el-input>
            </el-form-item>

             <el-form-item v-if="session.role_id == 3 ||session.role_id == 6"
              label="归属业务组长"
              prop="ascription_name"
              class="infoItem"
            >
                <el-select
            v-model="form.ascription_name"
            placeholder="请选择业务组长"
            @change="changeAscription"
            value-key="id"
          >
            <el-option
              v-for="item in BusinessS"
              :key="item.id"
              :label="item.username"
              :value="item"
            >
            </el-option>
          </el-select>
            </el-form-item>


             
          </el-col>
        </el-row>

        <el-row v-else>
          <el-col :span="12">
            <el-form-item label="账号" prop="usercode" class="infoItem">
              <el-input v-model="form.usercode" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="国家" prop="country" class="infoItem">
              <el-input v-model="form.country"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email" class="infoItem">
              <el-input v-model="form.email" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="归属业务员" prop="ascription_name" class="infoItem">
              <el-input v-model="form.ascription_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="在职职位" prop="position" class="infoItem">
              <el-input v-model="form.position"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="username" class="infoItem">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="区域" prop="region" class="infoItem">
              <el-input v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="负责人联系方式" prop="mobile" class="infoItem">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="负责人其他联系方式" prop="mobile" class="infoItem">
              <el-input v-model="form.othermobile"></el-input>
            </el-form-item>
            <el-form-item label="公司负责人" prop="company" class="infoItem">
              <el-input v-model="form.company" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  searchAscription,
} from "@/app/api/system";
import { userInfo, updateInfo, headImg } from "@/app/api/staff";
import { mapState } from "vuex";
export default {
  name: "UserIndex",
  data() {
    return {
      form: {},
      headImg: "",
      baseurl: api_url,
      BusinessS:[],
      manager:[]
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.getInfo();
    this.getBusinessS();
    this.getManager();

  },
  methods: {
    getInfo() {
      userInfo()
        .then((res) => {
          this.form = res.data;
          this.headImg = this.baseurl + "/" + this.form.head_img;
        })
        .catch((err) => {
          console.log(err);
        });
    },
     getBusinessS() {
        searchAscription({ role: 4, username: '' })
          .then((res) => {
            this.BusinessS = res.data;
          })
          .catch((error) => {
            console.log("ascriptionList error", error);
          });
    },
     getManager() {
        searchAscription({ role: 5, username: '' })
          .then((res) => {
            this.manager = res.data;
          })
          .catch((error) => {
            console.log("searchAscription error", error);
          });
    },
    changeInfo() {

      console.log(this.form);
      this.$confirm("请确认信息无误后提交!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateInfo(this.form)
            .then((res) => {
              Message({
                message: "修改成功",
                type: "success",
                duration: 2 * 1000,
              });
            })
            .catch((err) => {
              console.log(err);
              this.getInfo();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消!",
          });
        });
    },
    changeImg(file) {
      const fileObj = file.file;
      const form = new FormData();
      form.append("img", fileObj);
      headImg(form, this.form.id)
        .then((res) => {
          this.headImg = this.baseurl + "/" + res.data.path;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeAscription(ascription) {
      this.form.ascription = ascription.id;
      this.form.ascription_name = ascription.username;
    },
      changeManager(manager) {
      this.form.manager = manager.id;
      this.form.manager_name = manager.username;
    },
    // beforeAvatarUpload(file) {
    // const isJPG = file.type === "image/jpeg";
    // const isLt2M = file.size / 1024 / 1024 < 2;
    // if (!isJPG) {
    //   this.$message.error("上传图片只能是 JPG 格式!");
    // }
    // if (!isLt2M) {
    //   this.$message.error("上传图片大小不能超过 2MB!");
    // }
    // return isJPG && isLt2M;
    // },
  },
};
</script>

<style>
.headImg {
  text-align: center;
  width: 100px;
  margin: 0 42%;
}
/* .headImg img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
} */
.changeImg {
  display: block;
  font-size: 15px;
  color: #48a2ff;
}

.info {
  width: 60%;
  margin: 0 auto;
}
.infoItem {
  width: 70%;
}
/* .infoItem input {
  color: #ccc;
} */
[v-cloak] {
  display: none;
}
</style>